<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js'></script>
    <style>
    </style>
</head>
<body>
    <div id="app">
      <input type="text" v-model="hh" value="eeee">
      <h1>{{hh}}</h1>
    
      <!-- 表单控件 -->
      
    <select name="" v-model="sel">
        <option value="1">one</option>
        <option value="2">two</option>
        <option value="3">three</option>
    </select>
    <h2>{{sel}}</h2>
</div>

</body>
</html>

<script>
    //v-model这个指令主要应用在表单元素可以进行双向数据绑定
    //使用v-model可以获取表单的输入值
    //一个窍门: 以后遇到input select textarea这些元素的时候 ,直接加v-model
    //select元素v-mode 1绑定的其实是opt ion的va lue属性
    let vm= new Vue({
        el:"#app",
        data:{
         hh:'',   
         sel:"2",            
        }
    })
</script>